<template>
  <div class="container">
    <div class="left-box">
      <div class="search-item">
        <el-input v-model="filterText" placeholder="查询" />
      </div>
      <div class="structure-item">
        <el-tree ref="treeRef" class="filter-tree" :data="data" :props="defaultProps" :filter-node-method="filterNode" />
      </div>
    </div>
    <div class="right-box">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="search-content container demo-ruleForm "
        size="default" status-icon>
        <div class="search-form">
          <el-form-item label="学院:" prop="college">
            <el-select v-model="ruleForm.college" placeholder="请选择">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="专业:" prop="major">
            <el-select v-model="ruleForm.major" placeholder="请选择">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级:" prop="grade">
            <el-select v-model="ruleForm.grade" placeholder="请选择">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="班级:" prop="classes">
            <el-select v-model="ruleForm.classes" placeholder="请选择">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="姓名:" prop="name" placeholder="请输入">
            <el-input v-model="ruleForm.name" clearable />
          </el-form-item>
          <el-form-item label="所属社团:" prop="studentNumber" placeholder="请输入">
            <el-input v-model="ruleForm.studentNumber" clearable />
          </el-form-item>
        </div>
        <div class="search-button">
          <el-form-item>
            <el-button type="primary" @click="handleSearch" :icon="Search">
              查询
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm(ruleFormRef)" :icon="RefreshRight">重置</el-button>
          </el-form-item>
        </div>
      </el-form>

      <div class="main-content container">
        <div class="operate-box">
          <el-button type="primary" :icon="Upload">批量导入</el-button>
          <el-button type="success" :icon="Download">导出Excel</el-button>
          <el-button type="danger" :icon="Close">批量移除</el-button>
        </div>
        <el-table :data="tableData" stripe style="min-height: 40rem">
          <el-table-column type="index" label="序号" width="100" />
          <el-table-column prop="society" label="所属社团" />
          <el-table-column prop="role" label="角色" width="100" />
          <el-table-column prop="name" label="姓名" width="100" />
          <el-table-column prop="major" label="专业" />
          <el-table-column prop="grade" label="年级" width="100" />
          <el-table-column prop="phone" label="联系电话" />
          <el-table-column prop="QQ" label="QQ" />
          <el-table-column prop="operate" label="操作">
            <template #default="scope">
              <div class="theme-success">
                <el-button type="primary" link>查看</el-button>
                <el-button type="primary" link>编辑</el-button>
                <el-button type="danger" link>移除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <Pagination></Pagination>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 树形控件数据开始
import { ref, reactive, watch } from 'vue'
import { Search, RefreshRight, Upload, Download, Close, Position } from '@element-plus/icons-vue'
import type { ElTree, FormInstance, FormRules } from 'element-plus'

interface Tree {
  id: number
  label: string
  children?: Tree[]
}

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()

const defaultProps = {
  children: 'children',
  label: 'label',
}

watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data.label.includes(value)
}

const data: Tree[] = [
  {
    id: 1,
    label: '学生会',
    children: [
      {
        id: 4,
        label: '宣传部',
        children: [
          {
            id: 9,
            label: '张三--部长',
          },
          {
            id: 10,
            label: '李四--副部长',
          },
          {
            id: 11,
            label: '王五--副部长',
          },
        ],
      },
      {
        id: 4,
        label: '策划部',
        children: [
          {
            id: 9,
            label: '张三--部长',
          },
          {
            id: 10,
            label: '李四--副部长',
          },
          {
            id: 11,
            label: '王五--副部长',
          },
        ],
      },
      {
        id: 4,
        label: '组织部',
        children: [
          {
            id: 9,
            label: '张三--部长',
          },
          {
            id: 10,
            label: '李四--副部长',
          },
          {
            id: 11,
            label: '王五--副部长',
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: '兴趣爱好类',
    children: [
      {
        id: 4,
        label: '篮球爱好者协会',
        children: [
          {
            id: 9,
            label: '张健康--会长',
          },
          {
            id: 10,
            label: '李勇敢--副会长',
          },
          {
            id: 11,
            label: '曾礼貌--副会长长',
          },
        ],
      },
      {
        id: 4,
        label: '乒乓球协会',
        children: [
          {
            id: 9,
            label: '张健康--会长',
          },
          {
            id: 10,
            label: '李勇敢--副会长',
          },
          {
            id: 11,
            label: '曾礼貌--副会长长',
          },
        ],
      },
      {
        id: 4,
        label: '羽毛球',
        children: [
          {
            id: 9,
            label: '张健康--会长',
          },
          {
            id: 10,
            label: '李勇敢--副会长',
          },
          {
            id: 11,
            label: '曾礼貌--副会长长',
          },
        ],
      },
    ],
  },
  {
    id: 3,
    label: '志愿服务类',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
  {
    id: 4,
    label: '志愿服务类',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
]
// 树形控件数据结束

// 表单数据
const tableData = [
  {
    name: "张三",
    studentNumber: 201931773318,
    college: "计算机科学学院",
    major: "电子与计算机工程",
    grade: "2019级",
    classes: "3班",
    phone: 19982544309,
    role: '部长',
    QQ: 1170383781,
    society: '街舞社',
  },
  {
    name: "张三",
    studentNumber: 201931773318,
    college: "计算机科学学院",
    major: "电子与计算机工程",
    grade: "2019级",
    classes: "3班",
    phone: 19982544309,
    role: '副部长',
    QQ: 1170383781,
    society: '街舞社',
  },
  {
    name: "张三",
    studentNumber: 201931773318,
    college: "计算机科学学院",
    major: "电子与计算机工程",
    grade: "2019级",
    classes: "3班",
    phone: 19982544309,
    role: '会长',
    QQ: 1170383781,
    society: '街舞社',
  },
  {
    name: "张三",
    studentNumber: 201931773318,
    college: "计算机科学学院",
    major: "电子与计算机工程",
    grade: "2019级",
    classes: "3班",
    phone: 19982544309,
    role: '副会长',
    QQ: 1170383781,
    society: '街舞社',
  },
  {
    name: "张三",
    studentNumber: 201931773318,
    college: "计算机科学学院",
    major: "电子与计算机工程",
    grade: "2019级",
    classes: "3班",
    phone: 19982544309,
    role: '副主席',
    QQ: 1170383781,
    society: '街舞社',
  },
  {
    name: "张三",
    studentNumber: 201931773318,
    college: "计算机科学学院",
    major: "电子与计算机工程",
    grade: "2019级",
    classes: "3班",
    phone: 19982544309,
    role: '部长',
    QQ: 1170383781,
    society: '街舞社',
  },
  {
    name: "张三",
    studentNumber: 201931773318,
    college: "计算机科学学院",
    major: "电子与计算机工程",
    grade: "2019级",
    classes: "3班",
    phone: 19982544309,
    role: '会长',
    QQ: 1170383781,
    society: '街舞社',
  },
  {
    name: "张三",
    studentNumber: 201931773318,
    college: "计算机科学学院",
    major: "电子与计算机工程",
    grade: "2019级",
    classes: "3班",
    phone: 19982544309,
    role: '副会长',
    QQ: 1170383781,
    society: '街舞社',
  },
  {
    name: "张三",
    studentNumber: 201931773318,
    college: "计算机科学学院",
    major: "电子与计算机工程",
    grade: "2019级",
    classes: "3班",
    phone: 19982544309,
    role: '副会长',
    QQ: 1170383781,
    society: '街舞社',
  },
  {
    name: "张三",
    studentNumber: 201931773318,
    college: "计算机科学学院",
    major: "电子与计算机工程",
    grade: "2019级",
    phone: 19982544309,
    classes: "3班",
    role: '副会长',
    QQ: 1170383781,
    society: '街舞社',
  },
];

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  college: '',
  major: '',
  grade: '',
  classes: '',
  name: '',
  studentNumber: '',
})

const rules = reactive<FormRules>({
  college: [
    {
      message: '请选择',
      trigger: 'change',
    },
  ],
  major: [
    {
      message: '请选择',
      trigger: 'change',
    },
  ],
  grade: [
    {
      message: '请选择',
      trigger: 'change',
    },
  ],
  classes: [
    {
      message: '请选择',
      trigger: 'change',
    },
  ],
  name: [
    {
      message: '请输入',
      trigger: 'change',
    },
  ],
  studentNumber: [
    {
      message: '请输入',
      trigger: 'change',
    },
  ]
})
/**
 * 查询
 */
const handleSearch = () => {

}
/**
 * 重置验证规则
 */
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}


</script>

<style scoped lang="scss">
.container {
  display: grid;
  grid-template-columns: 1fr 4fr;
  gap: 2rem;
  min-height: 0;
  overflow: hidden;
  height: 100%;

  .left-box {
    box-shadow: var(--el-box-shadow-light);
    display: grid;
    grid-template-rows: 1fr 9fr;
    max-height: 100%;
    min-height: 0;

    .search-item {
      padding: 2rem 2rem;
      align-self: center;
      border-bottom: 1px solid #eee;
    }

    .structure-item {
      padding: 2rem;
      overflow: auto;

      /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
      // 滚动条整体部分
      &::-webkit-scrollbar {
        width: 6px;
        height: 8px;
      }

      // 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
      &::-webkit-scrollbar-button {
        display: none;
      }

      // 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
      &::-webkit-scrollbar-thumb {
        background: rgba(144, 147, 153, 0.3);
        cursor: pointer;
        border-radius: 4px;
      }

      // 边角，即两个滚动条的交汇处
      &::-webkit-scrollbar-corner {
        display: none;
      }

      // 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
      &::-webkit-resizer {
        display: none;
      }
    }
  }

  .right-box {
    box-shadow: var(--el-box-shadow-light);
    padding: 2rem;
    display: grid;
    grid-template-rows: 0.8fr 5fr;

    h1 {
      font-size: 2rem;
    }

    .search-content {
      background-color: #fff;
      padding: 1rem 0;
      display: grid;
      grid-template-columns: auto 8rem;

      .search-form {
        display: flex;
        flex-wrap: wrap;
      }

      .search-button {
        display: grid;

        .el-button {
          width: 5em;
          height: 3rem;
          padding: 1rem 0;

          &:last-child {
            margin: 0 !important;
          }
        }
      }

      .el-form-item {
        line-height: 3rem;
        height: 3rem;
        margin-right: 5rem;
      }

      .el-input {
        width: 23.68rem !important;
      }
    }

    .main-content {
      background-color: #fff;
      display: flex;
      flex-direction: column;

      .operate-box {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>